<div id="popover-content">
  <nz-card
    *ngIf="assertion$ | ngrxPush as assertion"
    [nzTitle]="cardTitle"
    nzBordered="false"
    id="card-content"
    [nzExtra]="cardExtra">
    <!-- popover title -->
    <ng-template #cardTitle>
      <i
        nz-icon
        nzTheme="twotone"
        [nzTwotoneColor]="'Assertion' | entityColor"
        nzType="civic-assertion"></i>
      {{ assertion.name }}
    </ng-template>

    <!-- status & flag, revision, comment counts-->
    <ng-template #cardExtra>
      <cvc-status-tag
        [status]="assertion.status"
        style="font-weight: normal"></cvc-status-tag>
      <cvc-entity-child-counts
        [cvcEntity]="assertion"
        cvcRoute="assertions"></cvc-entity-child-counts>
    </ng-template>

    <!-- summary & description -->
    <nz-descriptions
      nzLayout="vertical"
      nzSize="small"
      nzBordered="true"
      [nzColumn]="1">
      <nz-descriptions-item nzTitle="Summary">
        <p nz-typography>{{ assertion.summary }}</p>
      </nz-descriptions-item>

      <nz-descriptions-item nzTitle="Description">
        <p
          nz-typography
          nzEllipsis
          nzExpandable
          [nzEllipsisRows]="3">
          {{ assertion.description }}
        </p>
      </nz-descriptions-item>
    </nz-descriptions>

    <!-- assertion attributes -->
    <nz-descriptions
      nzSize="small"
      nzLayout="horizontal"
      [nzColumn]="2"
      nzBordered="true">
      <!-- assertion type -->
      <nz-descriptions-item
        nzTitle="Type"
        nzSpan="1">
        <cvc-attribute-tag
          cvcAttrName="assertionType"
          [cvcAttrValue]="assertion.assertionType"
          nz-tooltip
          iconPropertyType="type"
          [nzTooltipTitle]="
            assertion.assertionType | enumTooltip: 'assertionType'
          ">
        </cvc-attribute-tag>
      </nz-descriptions-item>

      <!-- assertion direction -->
      <nz-descriptions-item
        nzTitle="Direction"
        nzSpan="1">
        <cvc-attribute-tag
          [cvcAttrValue]="assertion.assertionDirection"
          nz-tooltip
          [nzTooltipTitle]="
            assertion.assertionDirection
              | enumTooltip
                : 'assertionDirection'
                : assertion.assertionType
                : 'Assertion'
          ">
        </cvc-attribute-tag>
      </nz-descriptions-item>

      <!-- clinical significance -->
      <nz-descriptions-item
        nzTitle="Significance"
        nzSpan="1">
        <cvc-attribute-tag
          [cvcAttrValue]="assertion.significance"
          nz-tooltip
          [nzTooltipTitle]="
            assertion.significance
              | enumTooltip
                : 'significance'
                : assertion.assertionType
                : 'Assertion'
          ">
        </cvc-attribute-tag>
      </nz-descriptions-item>

      <!-- variant origin -->
      <nz-descriptions-item
        [nzTitle]="voTitle"
        nzSpan="1">
        <ng-template #voTitle>Variant&nbsp;Origin</ng-template>
        <cvc-attribute-tag
          [cvcAttrValue]="assertion.variantOrigin"
          nz-tooltip
          [nzTooltipTitle]="
            assertion.variantOrigin | enumTooltip: 'variantOrigin'
          ">
        </cvc-attribute-tag>
      </nz-descriptions-item>
    </nz-descriptions>

    <!-- AMP, ACMG, Clingen Codes -->
    <nz-descriptions
      nzSize="small"
      nzLayout="horizontal"
      [nzColumn]="2"
      nzBordered="true"
      *ngIf="
        assertionRules.requiresAmpLevel(assertion.assertionType) ||
        assertionRules.requiresAcmgCodes(assertion.assertionType) ||
        assertionRules.requiresClingenCodes(assertion.assertionType)
      ">
      <!-- AMP/ASO/CAP -->
      <nz-descriptions-item
        nzTitle="AMP/ASCO/CAP Category"
        nzSpan="2"
        *ngIf="assertionRules.requiresAmpLevel(assertion.assertionType)">
        <nz-tag>
          {{ assertion.ampLevel | formatAmp: 'verbose' }}
        </nz-tag>
      </nz-descriptions-item>

      <!-- ACMG Codes -->
      <nz-descriptions-item
        nzSpan="2"
        [nzTitle]="acmgTitle"
        *ngIf="assertionRules.requiresAcmgCodes(assertion.assertionType)">
        <ng-template #acmgTitle>
          ACMG&nbsp;Codes&nbsp;<span
            nz-typography
            nzType="secondary">
            <i
              nz-icon
              nzType="info-circle"
              nz-tooltip
              nzTooltipTitle="All codes are reviewed during acceptance. Absence of a code implies it is not met.">
            </i>
          </span>
        </ng-template>
        <cvc-tag-list
          *ngIf="assertion.acmgCodes.length > 0; else valueUnspecified">
          <nz-tag
            nz-tooltip
            [nzTooltipTitle]="code.description"
            *ngFor="let code of assertion.acmgCodes">
            {{ code.code }}
          </nz-tag>
        </cvc-tag-list>
      </nz-descriptions-item>

      <!-- ClinGen Codes -->
      <nz-descriptions-item
        nzSpan="2"
        [nzTitle]="clingenTitle"
        *ngIf="
          assertionRules.requiresClingenCodes(assertion.assertionType) &&
          assertion.clingenCodes[0].code !== 'N/A'
        ">
        <ng-template #clingenTitle>
          ClinGen/CGC/VICC&nbsp;Codes&nbsp;<span
            nz-typography
            nzType="secondary"
            ><i
              nz-icon
              nzType="info-circle"
              nz-tooltip
              nzTooltipTitle="All codes are reviewed during acceptance. Absence of a code implies it is not met.">
            </i>
          </span>
        </ng-template>
        <cvc-tag-list
          *ngIf="assertion.clingenCodes.length > 0; else valueUnspecified">
          <nz-tag
            nz-tooltip
            [nzTooltipTitle]="code.description"
            *ngFor="let code of assertion.clingenCodes">
            {{ code.code }}
          </nz-tag>
        </cvc-tag-list>
      </nz-descriptions-item>

      <!-- molecular profile -->
      <nz-descriptions-item
        [nzTitle]="mpTitle"
        nzSpan="2">
        <ng-template #mpTitle> Molecular&nbsp;Profile </ng-template>
        <cvc-molecular-profile-tag
          [molecularProfile]="assertion.molecularProfile"
          [enablePopover]="true"></cvc-molecular-profile-tag>
      </nz-descriptions-item>

      <!-- molecular profile expression -->
      <nz-descriptions-item
        [nzTitle]="mpExpTitle"
        nzSpan="2">
        <ng-template #mpExpTitle>MP&nbsp;Expression</ng-template>
        <cvc-mp-tag-name
          [nameSegments]="
            assertion.molecularProfile.parsedName
          "></cvc-mp-tag-name>
      </nz-descriptions-item>

      <!-- disease -->
      <nz-descriptions-item
        *ngIf="assertion.disease"
        nzTitle="Disease"
        nzSpan="2">
        <cvc-disease-tag [disease]="assertion.disease"></cvc-disease-tag>
      </nz-descriptions-item>

      <!-- phenotypes -->
      <nz-descriptions-item
        *ngIf="assertion.phenotypes.length > 0"
        [nzTitle]="assertion.phenotypes.length > 1 ? 'Phenotypes' : 'Phenotype'"
        nzSpan="2">
        <cvc-tag-list>
          <cvc-phenotype-tag
            *ngFor="let ph of assertion.phenotypes"
            [phenotype]="ph"></cvc-phenotype-tag>
        </cvc-tag-list>
      </nz-descriptions-item>

      <!-- therapies -->
      <nz-descriptions-item
        *ngIf="assertion.therapies.length > 0"
        [nzTitle]="assertion.therapies.length > 1 ? 'Therapies' : 'Therapy'"
        nzSpan="2">
        <cvc-tag-list>
          <ng-container *ngFor="let therapy of assertion.therapies">
            <cvc-therapy-tag [therapy]="therapy"></cvc-therapy-tag>
          </ng-container>
        </cvc-tag-list>
        <nz-tag
          *ngIf="assertion.therapyInteractionType"
          nz-tooltip
          nzTooltipPlacement="top"
          [nzTooltipTitle]="
            assertion.therapyInteractionType | therapyInteractionEnumDisplay
          ">
          <i
            nz-icon
            style="color: #ac3996"
            [nzType]="
              assertion.therapyInteractionType
                | therapyInteractionEnumDisplay: 'icon-name'
            "
            class="attribute-icon"></i>
        </nz-tag>
      </nz-descriptions-item>

      <!-- regulatory approval -->
      <nz-descriptions-item
        *ngIf="assertion.regulatoryApproval !== null"
        nzTitle="Regulatory Approval"
        nzSpan="1">
        <i
          nz-icon
          *ngIf="assertion.regulatoryApproval === true"
          [nzType]="'check-circle'"
          [nzTheme]="'twotone'"
          [nzTwotoneColor]="'#52c41a'"></i>
        <i
          nz-icon
          *ngIf="assertion.regulatoryApproval === false"
          [nzType]="'close-square'"
          [nzTheme]="'twotone'"
          [nzTwotoneColor]="'#d93026'"></i>
      </nz-descriptions-item>

      <!-- FDA companion test -->
      <nz-descriptions-item
        *ngIf="assertion.fdaCompanionTest !== null"
        nzTitle="FDA Companion Test"
        nzSpan="1">
        <i
          nz-icon
          *ngIf="assertion.fdaCompanionTest === true"
          [nzType]="'check-circle'"
          [nzTheme]="'twotone'"
          [nzTwotoneColor]="'#52c41a'"></i>
        <i
          nz-icon
          *ngIf="assertion.fdaCompanionTest === false"
          [nzType]="'close-square'"
          [nzTheme]="'twotone'"
          [nzTwotoneColor]="'#d93026'"></i>
      </nz-descriptions-item>

      <!-- NCCN guideline -->
      <nz-descriptions-item
        *ngIf="assertion.nccnGuideline !== null"
        nzTitle="NCCN Guideline"
        nzSpan="1">
        {{ assertion.nccnGuideline?.name }}
        <span
          nz-typography
          nzType="secondary">
          ({{ assertion.nccnGuidelineVersion }})
        </span>
      </nz-descriptions-item>
    </nz-descriptions>
  </nz-card>
</div>

<ng-template #valueNotApplicable>
  <cvc-empty-value cvcEmptyCategory="not-applicable"></cvc-empty-value>
</ng-template>
<ng-template #valueUnspecified>
  <cvc-empty-value cvcEmptyCategory="unspecified"></cvc-empty-value>
</ng-template>
